<template>

    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#fff"
      unique-opened 
      router
:collapse="isTrue"
    >
      <el-submenu :index="item.id + ''" v-for="(item,index) in menulist"    :key="item.id">
        <template slot="title" >
          <i  :class="iconList[index]"></i>
          <span>{{ item.authName }}</span>
        </template>
        
          <el-menu-item 
         
          :index="'/admin/'+list.path"
          v-for="list in item.children"
          :key="list.id">
            <i class="el-icon-menu"></i>{{list.authName}}</el-menu-item
          >
      
      </el-submenu>
    </el-menu>

</template>

<script>
import { LeftMenu } from "../api";
export default {
  name: "MenuLeft",
  props:['isTrue'],
  data() {
    return {
      menulist: [],
      iconList:['el-icon-user','el-icon-document-checked','el-icon-s-goods','el-icon-tickets','el-icon-s-data',],
      
    };
  },
  methods:{
   
  },
  created() {
    LeftMenu().then((res) => {
      this.menulist = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
/deep/.el-submenu__title{
   
    display: flex;
    align-items: center;
}
/deep/.el-submenu{
    width: 200px;
}
/* .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  } */
</style>